<template>
  <div class="uploads">
    <div class="camp">
      <h1 class="title">Gourmet! <small>グルメ！<span class="ch">美食家！</span></small></h1>
    </div>
    <div class="block">
      <p class="tag"><b>Have A Try! </b>试试看！</p>
      <div class="upload-item">
        <el-upload
          class="avatar-uploader"
          action="/api/uploads"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <p class="notice">注意：<small>上传的图片只能是 JPG 格式，且大小不能超过 2MB</small></p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Uploads',
  data() {
    return {
      // 图片的url地址
      imageUrl: ''
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      // 上传图片的url地址
      this.$store.dispatch('uploads', {
        imageUrl: this.imageUrl
      })
      // 重置分析结果
      this.$store.dispatch('reset')
      // 请求进行图片分析
      this.$store.dispatch('classify', {
        path: res.data.path
      })
      // 跳转至结果页面
      this.$router.push('/online/result')
    },
    beforeAvatarUpload(file) {
      // 判断是否为JPG格式的图片文件
      const isJPG = file.type === 'image/jpeg'
      // 判断图片文件的大小是否小于2M
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传的图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传的图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style lang="scss">
.uploads {
  height: 600px;
  background: url('~@/assets/online/head.png') center no-repeat;
  background-size: 400px 400px;

  .camp {
    color: #1acfff;
    padding-top: 40px;
    padding-bottom: 40px;

    .title {
      font-size: 56px;
      text-align: center;
      text-shadow: 4px 4px 4px #1a7cf5;

      small {
        font-size: 32px;
        text-shadow: 2px 2px 2px #1a7cf5;

        .ch {
          color: #d5d6e6;
          text-shadow: 2px 2px 2px #b2b3b4;
        }
      }
    }
  }

  .block {
    width: 840px;
    height: 420px;
    margin: 0 auto;
    border: 1px solid #1acfff;

    .tag {
      font-size: 28px;
      text-align: center;
      padding-top: 50px;
      padding-bottom: 40px;

      b {
        color: #1acfff;
      }
    }

    .upload-item {
      width: 178px;
      margin: 0 auto;
    }

    .notice {
      color: #1acfff;
      text-align: center;
      padding-top: 40px;

      small {
        color: #a6a7a8;
      }
    }
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
